<!DOCTYPE HTML>
<html>

<head>
    <title>运费模版管理</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="../../../assets/css/dpl-min.css" rel="stylesheet" type="text/css" />
    <link href="../../../assets/css/bui-min.css" rel="stylesheet" type="text/css" />
    <link href="../../../assets/css/page-min.css" rel="stylesheet" type="text/css" />
    <link href="../../../assets/css/jx-style.css" rel="stylesheet" type="text/css">    <link href="../../../assets/css/prettify.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div class="container">
        <div class="detail-page">
            <div class="span24">
                <h3>运费配置<button type="button" id="close-page" class="pull-right button button-default">返回</button></h3>
                <hr>
            </div>
            <div class="detail-section">
                <div class=" detail-row">
                    <div class="span24">
                        <form id="J_Form" class="form-horizontal">
                            <div class="row">
                                <div class="control-group span12  ">
                                    <label class="control-label first">
                                        <s>*</s>模板名称</label>
                                    <div class="controls">
                                        <input name="b" type="text" data-rules="{required:true}" class="input-normal control-text">
                                    </div>
                                </div>
                            </div>
                            <table cellspacing="0" class="small-table table table-bordered">
                                <thead>
                                    <tr>
                                        <th>目的地 操作 </th>
                                        <th>订单金额满 </th>
                                        <th>运费(批量下单 元/件) </th>
                                        <th>运费(分销下单 元/单) </th>
                                        <th>操作 </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>全国</td>
                                        <td>
                                            <input value="1" type="text">
                                        </td>
                                        <td>
                                            <input value="1" type="text">
                                        </td>
                                        <td>
                                            <input value="1" type="text">
                                        </td>
                                        <td>
                                            默认
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            <!-- 表格 start-->
                            <div id="grid"></div>
                            <!-- 表格 end-->
                            <div class="actions-bar">
                                <div class="row">
                                    <div class="span12 offset10">
                                        <button type="submit" class="button button-primary">保存</button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 初始隐藏 dialog内容 -->
    <div id="content" class="hide">
        <form class="form-horizontal">
            <div class="row">
                <label class="control-label lg-label mr-10">
                    <s>*</s>城市:
                </label>
                <div class="control-group mb-20">
                    <div id="t1" class="span6">
                    </div>
                </div>
            </div>
            <div class="row ">
                <div class="control-group span16">
                    <label class="control-label lg-label ">
                        <s>*</s>订单金额满:
                    </label>
                    <div class="controls">
                        <input type="text" class="control-text" name="b">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="control-group span16">
                    <label class="control-label lg-label">
                        <s>*</s>运费(批量下单 元/件)：
                    </label>
                    <div class="controls">
                        <input type="text" class="control-text" name="c">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="control-group span16">
                    <label class="control-label lg-label">
                        <s>*</s>
                        运费(分销下单 元/单):</label>
                    <div class="controls">
                        <input type="text" class="control-text" name="d">
                    </div>
                </div>
            </div>
        </form>
    </div>
    <style>

    </style>
    <script type="text/javascript" src="../../../assets/js/jquery-1.8.1.min.js"></script>
    <script type="text/javascript" src="../../../assets/js/bui-min.js"></script>
    <script type="text/javascript" src="../../../assets/js/config-min.js"></script>
    <script type="text/javascript">
    BUI.use('common/page');

    $("#close-page").click(function() {
        top.topManager.closePage();
    });
    </script>
    <!-- script start -->
    <script type="text/javascript">
    BUI.use(['bui/grid', 'bui/data', 'common/search', 'bui/tree', 'bui/mask', 'bui/form'], function(Grid, Data, Search, Tree, Mask, Form) {
        var Grid = Grid,
            Store = Data.Store,
            columns = [{
                title: '目的地',
                dataIndex: 'a',
                elCls: 'center', //居中
                width: 200,
                editor: {
                    xtype: 'text'
                }
            }, {
                title: ' 订单金额满',
                elCls: 'center',
                dataIndex: 'b',
                width: 200
            }, {
                title: '运费(批量下单 元/件) ',
                elCls: 'center',
                dataIndex: 'c',
                width: 200,

            }, {
                title: '运费(分销下单 元/单)',
                elCls: 'center',
                dataIndex: 'd',
                width: 200,

            }, {
                title: '操作',
                dataIndex: 'f',
                elCls: 'center',
                width: 200,
                renderer: function() {
                    return '<span class="grid-command btn-edit"><i class="icon icon-edit"></i>[ 编辑 ]</span><span class="grid-command btn-del"><i class="icon icon-trash"></i> [ 删除 ]</span>'
                }
            }],
            data = [];

        new Form.Form({
            srcNode: '#J_Form'
        }).render();
        //数据缓冲类
        var treestore = new Data.TreeStore({
            proxy: {
                url: 'http://lp.taobao.com/go/rgn/citydistrictdata.php',
                dataType: 'jsonp'
            },
            map: {
                isleaf: 'leaf',
                value: 'text'
            },
            autoLoad: true
        });

        var tree = new Tree.TreeList({
            elCls: 'city-menu',
            render: '#t1',
            showLine: true,
            height: 300,
            checkType: 'all', //checkType:勾选模式，提供了4中，all,onlyLeaf,none,custom
            cascadeCheckd: true, //级联勾选
            loadMask: new Mask.LoadMask({
                el: '#t1'
            }),
            store: treestore,

            multipleCheck: true
        });
        tree.render();


        tree.on('itemclick', function(ev) {
            var item = ev.item;
            $('.log').text(item.path);
        });
        //初始化数据

        var isAddRemote = false,
            editing = new Grid.Plugins.DialogEditing({
                contentId: 'content', //设置隐藏的Dialog内容
                triggerCls: 'btn-edit', //触发显示Dialog的样式
                editor: {
                    title: '编辑'
                }

            }),
            store = new Store({ //初始化数据
                data: data,
                autoLoad: true, //自动加载数据
                pageSize: 2 // 配置分页数目
            }),
            grid = new Grid.Grid({
                render: '#grid',
                elCls: 'small-bui-grid-table',
                columns: columns,
                loadMask: true, //加载数据时显示屏蔽层
                forceFit: true,
                tbar: { //添加、删除

                    items: [{
                        btnCls: 'button button-small',
                        text: '添加指定地区',
                        listeners: {
                            'click': addFunction
                        }
                    }]
                },
                // 底部工具栏
                bbar: {
                    // pagingBar:表明包含分页栏
                    pagingBar: true
                },
                plugins: [editing], //插件
                store: store
            });

        grid.render();
        //点击操作
        grid.on('itemclick', function(ev) {
            var sender = $(ev.domTarget),
                itemEl = $(ev.element),
                item = ev.item;

            if (sender.hasClass('btn-del')) { //点击删除操作
                delFunction(item, itemEl);

            } else if (sender.hasClass('btn-edit')) {
                addFunction(item, itemEl);
            }

        });
        //添加记录
        function addFunction() {
            var newData = {};
            editing.add(newData, 'a'); //添加记录后，直接编辑
        }

        //没有多选插件，删除选中的记录
        function delFunction(item, itemEl) {
            BUI.Message.Confirm('确认删除记录？', function() {
                var input = itemEl.find('input'),
                    name = itemEl.attr('name');
                if (name) {
                    form.getField(name).remove();
                }

                store.remove(item);
            }, 'question');
        }


    });
    </script>
    <!-- script end -->

    <body>

</html>
